<template>
  <el-tabs tab-position="left" class="nav" id="nav" @tab-click="go">
    <el-tab-pane
      :label="item.label"
      v-for="(item, index) in nav"
      :key="index"
    ></el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      nav: [
        {
          label: "首页",
          path: "/Home",
        },
        {
          label: "标签",
          path: "/Tags",
        },
        {
          label: "团队",
          path: "/Team",
        },
        {
          label: "关于",
          path: "/About",
        },
        {
          label: "档案",
          path: "/Archives",
        },
        {
          label: "分类",
          path: "/Categories",
        },
      ],
    };
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {
    go: function (e) {
      //console.log(e.index);
      this.$router.push(this.nav[e.index].path);
    },
  },

  //组件
  components: {},

  //生命周期 - 实例完成
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss'>
#nav.el-tabs {
  transform: translateX(164px);
  .el-tabs__nav-wrap.is-left::after {
    height: 0;
  }
  .el-tabs__item::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: calc(50% - 7px);
    right: -6px;
    width: 14px;
    height: 14px;
    border: 1px solid #c7c7c7;
    border-radius: 50%;
    background-color: white;
  }

  .el-tabs__header .el-tabs__nav-wrap,
  .el-tabs__header .el-tabs__nav-scroll {
    overflow: visible;
  }

  .el-tabs__nav .el-tabs__active-bar {
    background: none;
  }

  .el-tabs__active-bar::after {
    content: "";
    position: absolute;
    top: calc(50% - 7px);
    right: -6px;
    width: 14px;
    height: 14px;
    background-color: #409eff;
    border-radius: 50%;
    z-index: 1;
  }
}
</style>
